<template>
  <el-dialog
    v-model="dialogConfig.visible"
    show-close
    width="500"
    :fullscreen="dialogConfig.fullscreen"
    destroy-on-close
    draggable
    overflow
    align-center
    center
  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header" style="position: relative; width: 100%">
        <FullScreen
          class="full-icon"
          @click="dialogConfig.fullscreen = !dialogConfig.fullscreen"
        />
        <h4 :id="titleId" :class="titleClass">{{ dialogConfig.title }}</h4>
      </div>
    </template>
    <slot name="container"> </slot>
    <template #footer>
      <slot name="footer"> </slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { FullScreen } from "@element-plus/icons-vue";

const props = withDefaults(
  defineProps<{
    dialogConfig: any;
  }>(),
  {
    dialogConfig: {
      title: "",
      fullscreen: false,
      visible: false,
    },
  },
);

watch(
  () => props.dialogConfig,
  (newValue) => {
    dialogConfig.value = newValue;
  },
);

const dialogConfig = ref(props.dialogConfig);
</script>

<style lang="scss" scoped>
.full-icon {
  position: absolute;
  top: 26px;
  right: 4px;
  width: 1em;
  height: 1em;
  margin-right: 8px;
  color: #666;
  cursor: pointer;
}
</style>
